
export default {
  watch: {
    $route() { },
  },
  beforeMount() {
  },
  beforeDestroy() {
  },
  mounted() {
  },
  methods: {
    // 弹幕
    setdmSwitch() {
      const dm = document.querySelectorAll('.pv-controls-right');
      const div = document.createElement('div');
      const innerDiv = document.createElement('div');
      const span1 = document.createElement('span');
      const span2 = document.createElement('span');
      const a = document.createElement('a');
      innerDiv.setAttribute('class', 'dm-switch');
      innerDiv.id = 'dmSwith';
      innerDiv.style.display = 'inline-block';
      innerDiv.style.width = '50px';
      innerDiv.style.height = '20px';
      innerDiv.style.position = 'relative';
      innerDiv.style.top = '5px';
      innerDiv.style.backgroundColor = '#ffb750';
      innerDiv.style.lineHeight = '20px';
      innerDiv.style.borderRadius = '10px';
      innerDiv.style.overflow = 'hidden';
      innerDiv.style.padding = ' 0 2px';
      a.style.position = 'absolute';
      a.style.top = '2px';
      a.style.display = 'inline-block';
      a.style.width = '25px';
      a.style.height = '16px';
      a.style.cursor = 'pointer';
      a.style.transition = 'all 0.3s';
      a.style.boxSizing = 'border-box';
      a.style.borderRadius = '8px';
      a.style.color = ' #ffffff';
      a.style.fontSize = '12px';
      a.style.textAlign = 'center';
      a.style.lineHeight = '16px';
      a.style.left = '2px';
      a.style.backgroundColor = ' #f56c6c';
      a.setAttribute('class', 'dm-switch-close');
      a.innerHTML = '弹';
      a.addEventListener('click', () => {
        const attrLeft = a.style.left;
        if (attrLeft === '2px') {
          // 打开
          a.style.left = '23px';
          a.style.backgroundColor = ' #67c23a';
        } else {
          // 关闭
          a.style.left = '2px';
          a.style.backgroundColor = ' #f56c6c';
        }
        if (attrLeft === '2px') {
          // 调用创建弹幕
          this.setdmContent();
          const dmInput = document.getElementById('dmInput');
          dmInput.addEventListener('keyup', (event) => {
            event.stopPropagation();
          });
          dmInput.addEventListener('input', (event) => {
            event.stopPropagation();
          });
          dmInput.addEventListener('blur', () => {
            dmInput.removeEventListener('keyup', (event) => {
              event.stopPropagation();
            });
          });
        } else {
          // 删除弹幕
          this.delDmContent();
        }
      });
      span1.innerHTML = '开';
      span2.innerHTML = '关';
      span1.style.display = 'inline-block';
      span1.style.boxSizing = ' border-box';
      span1.style.width = '23px';
      span1.style.height = ' 20px';
      span1.style.fontSize = ' 14px';
      span1.style.textAlign = ' center';
      span2.style.display = 'inline-block';
      span2.style.boxSizing = ' border-box';
      span2.style.width = '23px';
      span2.style.height = ' 20px';
      span2.style.fontSize = ' 14px';
      span2.style.textAlign = ' center';
      innerDiv.appendChild(span1);
      innerDiv.appendChild(span2);
      innerDiv.appendChild(a);
      div.appendChild(innerDiv);
      div.style.paddingTop = '8px';
      div.id = 'dm';
      div.setAttribute('class', 'pv-component-wrap');
      const child = dm[0].children[0];
      dm[0].insertBefore(div, child);
    },
    // 弹幕form
    setdmContent() {
      const dm = document.getElementById('dm');
      dm.style.width = '250px';
      const div = document.createElement('div');
      const input = document.createElement('input');
      const button = document.createElement('button');
      div.id = 'dmForm';
      div.style.display = 'inline-block';
      div.style.width = '200px';
      input.style.width = '120px';
      input.style.height = '24px';
      input.style.border = 'none';
      input.style.outline = 'none';
      input.style.padding = '0 4px';
      input.id = 'dmInput';
      button.style.width = '40px';
      button.style.height = '24px';
      button.style.display = 'inline-block';
      button.style.background = '#67c23a';
      button.style.color = '#ffffff';
      button.onmouseenter = () => {
        button.style.color = '#ffffff';
        button.style.background = '#83CD5E';
      };
      button.onmouseout = () => {
        button.style.background = '#67c23a';
        button.style.color = '#ffffff';
      };
      button.innerHTML = '提交';
      div.appendChild(input);
      div.appendChild(button);
      dm.insertBefore(div, document.getElementById('dmSwith'));
    },
    // 删除弹幕form
    delDmContent() {
      const dm = document.getElementById('dm');
      dm.style.width = 'auto';
      const dmForm = document.getElementById('dmForm');
      dm.removeChild(dmForm);
    },
  },
  // 销毁弹幕
  destroyed() {
    const dm = document.getElementById('dm');
    if (dm) {
      const controls = document.querySelectorAll('.pv-controls-right')[0];
      controls.removeChild(dm);
    }
  },
};
